<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { useUserStore } from '/src/user';
import { useRouter } from 'vue-router';

// 初始化状态
const userStore = useUserStore()
const router = useRouter()
const isEditing = ref(false)
const isEditingSchedule = ref(false)

// 接口定义
interface Holiday {
  id: number;
  name: string;
  startDate: string;
  endDate: string;
  description: string;
}

interface ScheduleItem {
  id: number;
  title: string;
  startDate: string;
  endDate: string;
  description: string;
  color: string;
}

// 响应式数据
const holidays = ref<Holiday[]>([]);
const today = ref(new Date());
const currentMonth = ref(today.value.getMonth());
const currentYear = ref(today.value.getFullYear());

// 模拟节假日数据
const initialHolidays = [
  {
    id: 1,
    name: '元旦',
    startDate: '2025-01-01',
    endDate: '2025-01-01',
    description: '元旦节'
  },
  {
    id: 2,
    name: '春节',
    startDate: '2025-01-28',
    endDate: '2025-02-03',
    description: '春节假期'
  },
  {
    id: 3,
    name: '清明节',
    startDate: '2025-04-04',
    endDate: '2025-04-06',
    description: '清明节假期'
  },
  {
    id: 4,
    name: '劳动节',
    startDate: '2025-05-01',
    endDate: '2025-05-03',
    description: '劳动节假期'
  },
  {
    id: 5,
    name: '端午节',
    startDate: '2025-05-31',
    endDate: '2025-06-02',
    description: '端午节假期'
  }
];

// 模拟校历日程数据
const initialSchedules = [
  {
    id: 1,
    title: '教职工上班',
    startDate: '2025-09-04',
    endDate: '2025-09-04',
    description: '教职工于2025年9月4日正式上班',
    color: '#4CAF50'
  },
  {
    id: 2,
    title: '学生报到',
    startDate: '2025-09-05',
    endDate: '2025-09-06',
    description: '本科、研究生老生9月5日-9月6日报到注册，9月8日正式上课',
    color: '#2196F3'
  },
  {
    id: 3,
    title: '新生报到',
    startDate: '2025-09-07',
    endDate: '2025-09-07',
    description: '本科、研究生新生报到',
    color: '#3F51B5'
  },
  {
    id: 4,
    title: '新生开学典礼',
    startDate: '2025-09-16',
    endDate: '2025-09-16',
    description: '本科、研究生新生开学典礼',
    color: '#9C27B0'
  },
  {
    id: 5,
    title: '国庆放假',
    startDate: '2025-10-01',
    endDate: '2025-10-07',
    description: '国庆假期，共7天',
    color: '#F44336'
  },
  {
    id: 6,
    title: '期末考试',
    startDate: '2026-01-10',
    endDate: '2026-01-20',
    description: '学期期末考试',
    color: '#FF9800'
  }
];

const schedules = ref<ScheduleItem[]>([]);

// 加载节假日数据
const loadHolidays = (): void => {
  const savedHolidays = localStorage.getItem('holidays')
  if (savedHolidays) {
    holidays.value = JSON.parse(savedHolidays)
  } else {
    // 如果没有保存的数据，使用初始数据
    holidays.value = [...initialHolidays]
    saveHolidaysToStorage()
  }
}

// 加载日程数据
const loadSchedules = (): void => {
  const savedSchedules = localStorage.getItem('schedules')
  if (savedSchedules) {
    schedules.value = JSON.parse(savedSchedules)
  } else {
    // 如果没有保存的数据，使用初始数据
    schedules.value = [...initialSchedules]
    saveSchedulesToStorage()
  }
}

// 保存节假日数据到本地存储
const saveHolidaysToStorage = (): void => {
  localStorage.setItem('holidays', JSON.stringify(holidays.value))
}

// 保存日程数据到本地存储
const saveSchedulesToStorage = (): void => {
  localStorage.setItem('schedules', JSON.stringify(schedules.value))
}

// 监听节假日数据变化，自动保存
watch(holidays, () => {
  saveHolidaysToStorage()
}, { deep: true })

// 监听日程数据变化，自动保存
watch(schedules, () => {
  saveSchedulesToStorage()
}, { deep: true })

// 管理员操作方法 - 节假日
const addHoliday = (): void => {
  const newId = holidays.value.length > 0 ? Math.max(...holidays.value.map(h => h.id)) + 1 : 1
  holidays.value.push({
    id: newId,
    name: '',
    startDate: formatDate(new Date()),
    endDate: formatDate(new Date()),
    description: ''
  })
}

const deleteHoliday = (index: number): void => {
  holidays.value.splice(index, 1)
}

const saveHolidays = (): void => {
  isEditing.value = false
  alert('保存成功')
}

// 管理员操作方法 - 日程
const addSchedule = (): void => {
  const newId = schedules.value.length > 0 ? Math.max(...schedules.value.map(s => s.id)) + 1 : 1
  schedules.value.push({
    id: newId,
    title: '',
    startDate: formatDate(new Date()),
    endDate: formatDate(new Date()),
    description: '',
    color: '#409EFF'
  })
}

const deleteSchedule = (index: number): void => {
  schedules.value.splice(index, 1)
}

const saveSchedules = (): void => {
  isEditingSchedule.value = false
  alert('保存成功')
}

// 日期处理函数
const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 检查事件是否已过期
const isEventExpired = (endDate: string): boolean => {
  const todayStr = formatDate(today.value)
  return endDate < todayStr
}

// 获取当月的所有日期
interface CalendarDay {
  day: number | null;
  isCurrentMonth: boolean;
  isToday: boolean;
  hasSchedule: boolean;
  hasHoliday?: boolean;
}

const getDaysInMonth = (): CalendarDay[] => {
  const daysInMonth = new Date(currentYear.value, currentMonth.value + 1, 0).getDate();
  const firstDayOfMonth = new Date(currentYear.value, currentMonth.value, 1).getDay();

  const days: CalendarDay[] = [];

  // 添加上个月的占位日期
  for (let i = 0; i < firstDayOfMonth; i++) {
    days.push({
      day: null,
      isCurrentMonth: false,
      isToday: false,
      hasSchedule: false
    });
  }

  // 添加当月的日期
  for (let i = 1; i <= daysInMonth; i++) {
    const dateStr = `${currentYear.value}-${String(currentMonth.value + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
    const isToday = formatDate(today.value) === dateStr;

    // 查找当天是否有未过期的日程
    const hasSchedule = schedules.value.some(schedule => {
      if (isEventExpired(schedule.endDate)) return false;

      const startDate = new Date(schedule.startDate);
      const endDate = new Date(schedule.endDate);
      const currentDate = new Date(dateStr);
      return startDate <= currentDate && currentDate <= endDate;
    });

    // 查找当天是否有未过期的节假日
    const hasHoliday = holidays.value.some(holiday => {
      if (isEventExpired(holiday.endDate)) return false;

      const startDate = new Date(holiday.startDate);
      const endDate = new Date(holiday.endDate);
      const currentDate = new Date(dateStr);
      return startDate <= currentDate && currentDate <= endDate;
    });

    days.push({
      day: i,
      isCurrentMonth: true,
      isToday,
      hasSchedule,
      hasHoliday
    });
  }

  return days;
};

// 计算属性
const monthDays = computed(() => getDaysInMonth());

const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

// 月份切换
const prevMonth = (): void => {
  currentMonth.value--;
  if (currentMonth.value < 0) {
    currentMonth.value = 11;
    currentYear.value--;
  }
};

const nextMonth = (): void => {
  currentMonth.value++;
  if (currentMonth.value > 11) {
    currentMonth.value = 0;
    currentYear.value++;
  }
};

// 获取当前月的日程（过滤掉已过期的事件）
const getCurrentMonthSchedules = (): ScheduleItem[] => {
  const monthStart = new Date(currentYear.value, currentMonth.value, 1);
  const monthEnd = new Date(currentYear.value, currentMonth.value + 1, 0);

  return schedules.value.filter(schedule => {
    if (isEventExpired(schedule.endDate)) return false;

    const startDate = new Date(schedule.startDate);
    const endDate = new Date(schedule.endDate);

    return (startDate <= monthEnd && endDate >= monthStart);
  });
};

const currentMonthSchedules = computed(() => getCurrentMonthSchedules());

// 获取当前月的节假日（过滤掉已过期的节假日）
const getCurrentMonthHolidays = (): Holiday[] => {
  const monthStart = new Date(currentYear.value, currentMonth.value, 1);
  const monthEnd = new Date(currentYear.value, currentMonth.value + 1, 0);

  return holidays.value.filter(holiday => {
    if (isEventExpired(holiday.endDate)) return false;

    const startDate = new Date(holiday.startDate);
    const endDate = new Date(holiday.endDate);

    return (startDate <= monthEnd && endDate >= monthStart);
  });
};

const currentMonthHolidays = computed(() => getCurrentMonthHolidays());

// 格式化显示日期
const formatDisplayDate = (startDate: string, endDate: string): string => {
  if (startDate === endDate) {
    return startDate;
  } else {
    return `${startDate} ~ ${endDate}`;
  }
};

// 页面加载时初始化
onMounted(() => {
  loadHolidays()
  loadSchedules()
});
</script>
<template>
  <div class="page-container">
    <div class="holiday-page">
      <!-- 日历卡片容器 -->
      <div class="calendar-card">
        <!-- 日历头部 -->
        <div class="calendar-header">
          <button class="month-btn" @click="prevMonth">
            <el-icon size="18"><ArrowLeft /></el-icon>
          </button>
          <span class="current-date">{{ currentYear }}年 {{ monthNames[currentMonth] }}</span>
          <button class="month-btn" @click="nextMonth">
            <el-icon size="18"><ArrowRight /></el-icon>
          </button>
        </div>

        <!-- 星期标题 -->
        <div class="weekdays">
          <div class="weekday">周一</div>
          <div class="weekday">周二</div>
          <div class="weekday">周三</div>
          <div class="weekday">周四</div>
          <div class="weekday">周五</div>
          <div class="weekday">周六</div>
          <div class="weekday">周日</div>
        </div>

        <!-- 日历日期 -->
        <div class="days">
          <div
              class="day"
              v-for="(day, index) in monthDays"
              :key="index"
              :class="{
              'other-month': !day.isCurrentMonth,
              'today': day.isToday,
              'has-schedule': day.hasSchedule,
              'has-holiday': day.hasHoliday
            }"
          >
            <span v-if="day.day">{{ day.day }}</span>
          </div>
        </div>

        <!-- 今日信息 -->
        <div class="today-info" v-if="monthDays.some(day => day.isToday)">
          <div class="today-icon">📅</div>
          <div class="today-details">
            <div class="today-date">今日: {{ formatDate(today) }}</div>
            <div class="today-week">第{{ Math.floor((today.getDate() - 1) / 7) + 1 }}周</div>
          </div>
        </div>
      </div>

      <!-- 日程列表 -->
      <div class="schedules-card">
        <div class="schedules-header">
          <h2 class="schedules-title">
            <span class="title-icon">📋</span>
            本月日程
          </h2>

          <!-- 管理员可见的编辑按钮 -->
          <div class="admin-buttons" v-if="userStore.isAdmin">
            <button
                class="edit-btn"
                @click="isEditing = !isEditing"
            >
              {{ isEditing ? '取消编辑节假日' : '编辑节假日' }}
            </button>
            <button
                class="edit-btn"
                @click="isEditingSchedule = !isEditingSchedule"
            >
              {{ isEditingSchedule ? '取消编辑日程' : '编辑日程' }}
            </button>
          </div>
        </div>

        <!-- 节假日列表展示区 -->
        <div class="holiday-list" v-if="currentMonthHolidays.length > 0 || (isEditing && userStore.isAdmin)">
          <h3 class="holiday-title">
            <span class="holiday-icon">🎉</span>
            节假日安排
          </h3>

          <!-- 浏览模式 -->
          <div v-if="!isEditing">
            <div
                v-for="holiday in currentMonthHolidays"
                :key="holiday.id"
                class="holiday-item"
            >
              <div class="view-mode">
                <h3>{{ holiday.name }}</h3>
                <p class="holiday-date">日期: {{ formatDisplayDate(holiday.startDate, holiday.endDate) }}</p>
                <p class="holiday-desc">{{ holiday.description }}</p>
              </div>
            </div>
          </div>

          <!-- 编辑模式（仅管理员可见） -->
          <div v-else-if="userStore.isAdmin">
            <div
                v-for="(holiday, index) in holidays"
                :key="holiday.id"
                class="holiday-item"
            >
              <div class="edit-mode">
                <input
                    v-model="holiday.name"
                    placeholder="节假日名称"
                    class="edit-input"
                >
                <div class="date-inputs">
                  <input
                      v-model="holiday.startDate"
                      type="date"
                      class="edit-input"
                      placeholder="开始日期"
                  >
                  <span class="date-separator">至</span>
                  <input
                      v-model="holiday.endDate"
                      type="date"
                      class="edit-input"
                      placeholder="结束日期"
                  >
                </div>
                <textarea
                    v-model="holiday.description"
                    placeholder="描述"
                    class="edit-textarea"
                ></textarea>
                <button @click="deleteHoliday(index)" class="delete-btn">
                  <span class="btn-icon">×</span>
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 管理员新增节假日按钮 -->
        <div v-if="userStore.isAdmin && isEditing" class="admin-controls">
          <button class="add-btn" @click="addHoliday">
            <span class="btn-icon">+</span>
            添加节假日
          </button>
          <button class="save-btn" @click="saveHolidays">
            <span class="btn-icon">✓</span>
            保存节假日
          </button>
        </div>

        <!-- 日程编辑区域（仅管理员可见） -->
        <div v-if="isEditingSchedule && userStore.isAdmin" class="schedule-edit">
          <h3 class="edit-title">
            <span class="edit-icon">✏️</span>
            编辑日程
          </h3>
          <div
              v-for="(schedule, index) in schedules"
              :key="schedule.id"
              class="schedule-edit-item"
          >
            <input
                v-model="schedule.title"
                placeholder="日程标题"
                class="edit-input"
            >
            <div class="date-inputs">
              <input
                  v-model="schedule.startDate"
                  type="date"
                  class="edit-input"
                  placeholder="开始日期"
              >
              <span class="date-separator">至</span>
              <input
                  v-model="schedule.endDate"
                  type="date"
                  class="edit-input"
                  placeholder="结束日期"
              >
            </div>
            <textarea
                v-model="schedule.description"
                placeholder="描述"
                class="edit-textarea"
            ></textarea>
            <div class="color-picker">
              <label>颜色:</label>
              <input
                  v-model="schedule.color"
                  type="color"
                  class="color-input"
              >
            </div>
            <button @click="deleteSchedule(index)" class="delete-btn">
              <span class="btn-icon">×</span>
              删除
            </button>
          </div>
          <div class="admin-controls">
            <button class="add-btn" @click="addSchedule">
              <span class="btn-icon">+</span>
              添加日程
            </button>
            <button class="save-btn" @click="saveSchedules">
              <span class="btn-icon">✓</span>
              保存日程
            </button>
          </div>
        </div>

        <!-- 日程展示区域 -->
        <div class="schedules">
          <div
              class="schedule-item"
              v-for="schedule in currentMonthSchedules"
              :key="schedule.id"
              :style="{ backgroundColor: schedule.color + '20', borderLeft: `4px solid ${schedule.color}` }"
          >
            <div class="schedule-header">
              <h3 class="schedule-title" :style="{ color: schedule.color }">{{ schedule.title }}</h3>
              <div class="schedule-dates">{{ formatDisplayDate(schedule.startDate, schedule.endDate) }}</div>
            </div>
            <p class="schedule-desc">{{ schedule.description }}</p>
          </div>
          <div v-if="currentMonthSchedules.length === 0 && currentMonthHolidays.length === 0" class="no-schedules">
            <div class="no-data-icon">📅</div>
            <p>本月暂无安排</p>
            <p class="no-data-hint" v-if="userStore.isAdmin">点击上方按钮添加节假日或日程</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 引入Element Plus样式 */
@import url("//unpkg.com/element-plus@2.3.9/dist/index.css");

/* 全局楷体设置 */
* {
  font-family: "楷体", "KaiTi", "STKaiti", serif !important;
}

/* 页面容器 */
.page-container {
  min-height: 100vh;
  background: #ffffff;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.holiday-page {
  max-width: 1400px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  margin: 0 auto;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 卡片通用样式 */
.calendar-card, .schedules-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.calendar-card:hover, .schedules-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* 日历头部 */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f5f5f5;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.month-btn {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.month-btn:hover {
  background: #e9ecef;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.current-date {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 星期标题 */
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
  font-size: 16px;
}

.weekday {
  text-align: center;
  color: #6c757d;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 日历日期 */
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 25px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
  font-size: 16px;
}

.day {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  background: #f8f9fa;
  border: 1px solid transparent;
  font-weight: 500;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.day:hover {
  background: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.day.other-month {
  color: #adb5bd;
  background: #f8f9fa;
  opacity: 0.6;
}

.day.today {
  background: #007bff;
  color: white;
  font-weight: 700;
  border: 1px solid #007bff;
  box-shadow: 0 3px 10px rgba(0, 123, 255, 0.3);
}

.day.has-schedule::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28a745;
}

.day.has-holiday {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
}

.day.has-holiday::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffc107;
}

/* 今日信息 */
.today-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: #e7f3ff;
  border-radius: 12px;
  color: #0056b3;
  margin-top: 20px;
  border: 1px solid #b3d4fc;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.today-icon {
  font-size: 24px;
}

.today-details {
  flex: 1;
}

.today-date {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.today-week {
  font-size: 14px;
  opacity: 0.9;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 日程头部 */
.schedules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f5f5f5;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.schedules-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.title-icon {
  font-size: 26px;
}

.admin-buttons {
  display: flex;
  gap: 12px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 按钮样式 */
.edit-btn, .add-btn, .save-btn {
  margin: 0;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.edit-btn {
  background: #28a745;
  color: white;
}

.edit-btn:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.add-btn {
  background: #007bff;
  color: white;
}

.add-btn:hover {
  background: #0069d9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.save-btn {
  background: #ffc107;
  color: #212529;
}

.save-btn:hover {
  background: #e0a800;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.delete-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.delete-btn:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-icon {
  font-size: 16px;
  font-weight: bold;
}

/* 节假日样式 */
.holiday-list {
  margin: 25px 0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.holiday-title {
  color: #e67e22;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #fdebd0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.holiday-icon {
  font-size: 22px;
}

.holiday-item {
  border: 1px solid #fdebd0;
  padding: 20px;
  margin: 15px 0;
  border-radius: 12px;
  background: #fef9e7;
  transition: all 0.3s ease;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.holiday-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.holiday-date {
  color: #e67e22;
  font-weight: 600;
  margin: 10px 0;
  font-size: 15px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.holiday-desc {
  color: #7d6608;
  line-height: 1.6;
  font-size: 15px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 编辑模式样式 */
.edit-input, .edit-textarea {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #f8f9fa;
  font-family: "楷体", "KaiTi", "STKaiti", serif !important;
}

.edit-input:focus, .edit-textarea:focus {
  outline: none;
  border-color: #007bff;
  background: white;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.edit-textarea {
  min-height: 80px;
  resize: vertical;
}

.admin-controls {
  margin: 20px 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 日程编辑区域 */
.schedule-edit {
  margin: 25px 0;
  padding: 20px;
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  background: #f8f9fa;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.edit-title {
  color: #495057;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.edit-icon {
  font-size: 18px;
}

.schedule-edit-item {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  background: white;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.date-separator {
  color: #6c757d;
  font-size: 14px;
  font-weight: 600;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.color-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.color-picker label {
  color: #495057;
  font-weight: 600;
  font-size: 14px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.color-input {
  width: 60px;
  height: 40px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  cursor: pointer;
}

/* 日程展示区域 */
.schedules {
  margin-top: 20px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.schedule-item {
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.schedule-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.schedule-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.schedule-dates {
  color: #6c757d;
  font-size: 14px;
  font-weight: 600;
  background: #f8f9fa;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.schedule-desc {
  margin: 0;
  font-size: 15px;
  color: #495057;
  line-height: 1.6;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.no-schedules {
  text-align: center;
  color: #6c757d;
  padding: 40px 20px;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.no-data-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-schedules p {
  font-size: 16px;
  margin: 0 0 8px 0;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

.no-data-hint {
  font-size: 14px !important;
  opacity: 0.7;
  font-family: "楷体", "KaiTi", "STKaiti", serif;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .holiday-page {
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 800px;
  }

  .page-container {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .calendar-card, .schedules-card {
    padding: 20px;
  }

  .day {
    height: 45px;
  }

  .schedules-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .admin-buttons {
    flex-direction: column;
    width: 100%;
  }

  .admin-controls {
    flex-direction: column;
  }

  .date-inputs {
    flex-direction: column;
    align-items: flex-start;
  }

  .date-separator {
    display: none;
  }

  .schedule-header {
    flex-direction: column;
    gap: 10px;
  }

  .schedule-dates {
    align-self: flex-start;
  }

  .month-btn {
    width: 40px;
    height: 40px;
  }

  .current-date {
    font-size: 20px;
  }

  .schedules-title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .page-container {
    padding: 10px;
  }

  .calendar-card, .schedules-card {
    padding: 15px;
    border-radius: 15px;
  }

  .holiday-page {
    gap: 20px;
  }

  .day {
    height: 40px;
    font-size: 14px;
  }

  .current-date {
    font-size: 18px;
  }
}
</style>